<template>
  <section class="my-diary clearfix">
    <div class="left-box">
      <left-menu :menu="list"></left-menu>
    </div>
    <div class="center-box">
      <router-view></router-view>
    </div>
    <div class="right-box" :class="{'active':show}">
      <div class="guan" v-if="path()!==true">
        <span>1年</span>
        <p>积分：<b>200000</b></p>
        <p>您是红粉宝宝平台皇冠级用户<span>【详情】</span></p>
      </div>
      <side-user style="margin-bottom: 10px" :type="1"></side-user>
      <side-adv></side-adv>
      <side-list :list="sidelist" ></side-list>
    </div>
  </section>
</template>

<script>
import LeftMenu from "../../../components/My/LeftMenu/"
import SideUser from "../../../components/My/UserInfo/SideUserinfo"
import SideList from "@/components/SideMenu/SideList"
import SideAdv from "@/components/SideMenu/SideAdv"
export default {
  name: 'MyOrder',
  components: {
      LeftMenu,
      SideUser,
      SideList,
      SideAdv
  },
   data () {
      return {
          list: [
              {
                  id:1,
                  name: '日记管理',
                  child: [
                      {id: 11,name: '发布日记', path: '/my/mydiary/write',
                          child:[
                              {id: 13,name: '评论详情', path: ''},
                              {id: 13,name: '评论详情', path: ''},
                          ]},
                      {id: 12,name: '日记列表', path: '/my/mydiary/list',
                          child:[
                              {id: 13,name: '评论详情', path: '/my/mydiary/modify'},
                              {id: 13,name: '评论详情', path: ''},
                          ]},
                      {id: 13,name: '评论管理', path: '/my/mydiary/common',
                        child:[
                            {id: 13,name: '评论详情', path: '/my/mydiary/commentdetails'},
                            {id: 13,name: '评论详情', path: ''},

                        ]
                      },
                      {id: 14,name: '草稿箱', path: '/my/mydiary/draft',
                          child:[
                              {id: 13,name: '评论详情', path: ''},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                      },
                      {id: 15,name: '通过审核的日记', path: '/my/mydiary/checked',
                          child:[
                              {id: 13,name: '评论详情', path: ''},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                        },
                      {id: 16,name: '未通过审核的日记', path: '/my/mydiary/unchecked',
                          child:[
                              {id: 13,name: '评论详情', path: ''},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                      },
                      {id: 17,name: '被分享的日记', path: '/my/mydiary/sharing',
                          child:[
                              {id: 13,name: '评论详情', path: '/my/mydiary/sharingdelist'},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                      },
                      {id: 18,name: '被转载的日记', path: '/my/mydiary/transhipment',
                          child:[
                              {id: 13,name: '评论详情', path: ''},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                      },
                      {id: 19,name: '被投诉的日记', path: '/my/mydiary/complaint',
                          child:[
                              {id: 13,name: '评论详情', path: '/my/mydiary/complaindelist'},
                              {id: 13,name: '评论详情', path: ''},
                          ]
                      }
                  ]
              }
          ],
          sidelist: [
              {
                  id: 1,
                  name: '竞价排名',
                  child: [
                    {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                  ]
              },
              {
                  id: 2,
                  name: '大家正在预约',
                  child: [
                      {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                  ]
              },
              {
                  id: 3,
                  name: '新品推荐',
                  child: [
                      {id: 31,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 32,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 33,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                      {id: 34,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                  ]
              },
          ],
          show:false,
      }
   },
    created () {

    },
    methods: {
      path () {
          if(this.$route.path === '/my/mydiary/commentdetails'){

             this.show = true
          }
      }

    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .my-diary {
    padding: 30px 0;
      .active{
          display: none !important;
      }
    .guan{
      width: 260px;
      height: 154px;
      background: url("../../../assets/huanguan.png");
      margin-bottom: 15px;
      text-align: center;
      padding-top: 63px;
      >span{
        background-color: #f7bf0d;
        border-radius: 4px;
        color: white;
        padding: 2px 8px;
        font-size: 14px;
      }
      p{
        padding-top:10px;
        color: #fec32b;
        font-size: 14px;
        b{
          font-size: 20px;
        }
        span{
          color: @theme-color-dark;
        }
      }
      >:last-child{
        padding-top:1px;
      }
    }
    .left-box {
      width: 180px;
      border: 1px solid @border-color;
      background-color: #fafafa;
      float: left;
      margin-right: 20px;
    }
    .center-box {
      float: left;
      width: 700px;
      margin-right: 20px;
      background-color: #fff;
      min-height: 100px;
    }
    .right-box {
      float: left;
      width: 260px;
    }
  }
</style>
